<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #161616;
        }

        ul,
        ol>li {
            list-style: none;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .logo {
            width: 138px;
            height: 50px;
        }

        header {
            height: 80px;
            background-color: rgb(252, 252, 252);
            opacity: 0.8;
            margin: auto;
            /* display: none; */
            z-index: 10;
            /* position: fixed; */
            width: 100%;
            box-shadow: 0px 1px 2px 2px rgb(230, 228, 228);
        }

        #list {
            /* position: absolute; */
            /* float: left; */
            top: 0;
            /* left: 50%; */
            width: 600px;
            margin: 0 auto;
            position: fixed;
            left: 50%;
        }

        #list>li {
            float: left;
            line-height: 80px;
            margin-right: 30px;
            color: #161616;
            cursor: pointer;
        }

        #list>li:hover {
            transition: all .3s;
            color: rgb(255, 50, 45);
        }

        #list>li:hover ul {
            display: block;
        }

        #list>li>ul {
            box-shadow: 1px 0px 3px 1px rgb(212, 211, 211);
            padding: 20px;
            position: absolute;
            display: none;
            top: 58px;
            background-color: white;
        }

        #fashion_ul {
            left: -20px;
        }

        #commodity_ul {
            left: 72px;
        }

        #enter_ul {
            left: 168px;
        }

        #list>li>ul>li {
            line-height: 30px;
        }

        #list a:hover {
            transition: all .3s;
            color: rgb(255, 50, 45);
        }

        .logo {
            width: 137px;
            height: 100%;
            margin-left: 5%;
        }

        .logo img {
            width: 100%;
        }

        /* 搜索 */
        .sitesearch {
            width: 20px;
            height: 20px;
            background-image: url(../../static/images/01-search.png);
            background-repeat: no-repeat;
            opacity: .5;
            position: absolute;
            top: 32px;
            left: 85%;
            cursor: pointer;
        }

        /* 搜索语言 */
        .language {
            position: absolute;
            left: 87%;
            top: 0;
            line-height: 80px;
            height: 80px;
            color: #969696;
        }

        .language a {
            color: #969696;
            font-size: 14px;
        }

        .second {
            width: 100%;
            height: 60px;
            /* background-color: aqua; */
            line-height: 60px;
            padding-left: 64px
        }

        .second a {
            font-size: 14px;
            color: gray;
        }

        .second span {
            font-size: 16px;
            font-weight: 200;
        }

        /* 表单字段集 */
        .sousuo {
            width: 200px;
            height: 80px;
            margin: 0 auto;
            border-bottom: none;
            border-left: none;
            border-right: none;
        }

        .sousuo_text {
            text-align: center;
        }

        /* 搜索框 */
        .searchBox {
            width: 464px;
            height: 40px;
            /* background-color: royalblue; */
            margin: 0 auto;
        }

        .input_text {
            width: 400px;
            height: 30px;
        }

        .input_btn {
            height: 34px;
            width: 55px;
            text-align: center;
        }


        /* 瀑布流 */
        #container {
            width: 1000px;
            margin: 40px auto;
            position: relative;
            
        }

        #container .box {
            float: left;
            height: auto;
            margin: 0 20px 20px 0;
            border-top: 0 none;
            background-color: #fff;
            border-radius: 2px;
            width: 235px;
            padding: 0;
            border-radius: 2px 2px 0 0;
            box-shadow: 0 0 5px #ddd;
            overflow: hidden;
        }

        #container .box:nth-of-type(4) {
            margin: 0;
        }

        #container .box img {
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <img src="http://www.handu.com/uploadfile/2020/1106/20201106115623920.png" alt="">
        </div>
        <ul id="list">
            <li id="fashion">时尚动态
                <ul id="fashion_ul">
                    <li><a href="http://www.handu.com/html/news/newsinto1/">全智贤再次代言韩都</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">IU司职韩都时尚总监</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">时尚王推韩都联名款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">奇妙灵兽节韩都出新</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto4/">联名姜乐音推街头风</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto5/">跨界芭莎亮相时装周</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto6/">举办韩国设计师大赛</a></li>
                </ul>
            </li>
            <li id="commodity">商品发布
                <ul id="commodity_ul">
                    <li><a href="./goods.html">当季新品</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">明星同款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">设计师款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">IP合作款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto4/">时尚休闲</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto5/">都市通勤</a></li>
                </ul>
            </li>
            <li id="enter">走进韩都
                <ul id="enter_ul">
                    <li><a href="http://www.handu.com/html/news/newsinto1/">品牌故事</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">无穷花开</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">加入韩都</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">会员福利</a></li>
                </ul>
            </li>
            <li id="flagship">
                <a href="https://handuyishe.tmall.com/">官方旗舰店</a>
            </li>
            <li id="flagship">
                <a href="../html/login.html">登录</a>
            </li>
        </ul>
        <a href="./search.html" class="sitesearch"></a>
        <div class="language">
            <a href="http://www.handu.com/html/search/">中文</a>
            "|"
            <a href="http://en.handu.com/">EN</a>
        </div>
    </header>
    <div class="second">
        <a href="./index.html">首页 &nbsp; > &nbsp; </a><span>搜索</span>
    </div>
    <fieldset class="sousuo">
        <legend class="sousuo_text">
            <h1>搜索</h1>
        </legend>
    </fieldset>
    <div class="searchBox">
        <input type="text" class="input_text">
        <button class="input_btn">搜索</button>
    </div>
    <!-- 瀑布流 -->
    <div id="container">

    </div>
</body>
<script src="../../static/libs/jQuery.js"></script>
<script src="../../static/libs/jquery.lazyload.js"></script>
<script>
    let container = $("#container");
    let height_array;
    let start = 24;

    //页面加载完发送请求
    $(document).ready(function () {
        load()
            .done(function (data) {
                console.log(data)
                //渲染页面
                render(data.data.object_list);
                start = data.data.next_start;
                // 瀑布流排序 :
                sort();
                // 调用懒加载
                $(".lazy").lazyload();
            });
    })

    function load() {
        let options = {
            url: "http://127.0.0.1:8888/proxy/dt",
            type: "GET",
            data: {
                include_fields: " top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
                filter_id: "时尚搭配_搭配达人",
                start: 24

            },
            dataType: "json"
        }
        return $.ajax(options);
    }
    function render(list) {
        container.append(list.map(
            item => `
                        <div class="box" >
                            <img class="lazy" height=${item.photo.height / item.photo.width * 235} data-original=${item.photo.path}>
                        </div>
                    `
        ).join(""));
    }
    // 瀑布流排序 : 
    function sort() {
        let $box = $(".box")
        height_array = [];
        let offset_array = [];
        $.each($box, function (index, ele) {
            if (index < 4) {
                height_array.push($(ele).outerHeight());
                offset_array.push($(ele).position().left);
            } else {
                let min_height = Math.min.apply(false, height_array);
                let min_index = height_array.indexOf(min_height);
                let _left = offset_array[min_index]

                $(ele).css({
                    position: "absolute",
                    top: min_height,
                    left: _left
                });

                height_array[min_index] += $(ele).outerHeight();
            }
        })
        // console.log(height_array);
    }
    // 页面卷动事件 : 
    let t = null;
    let loading = false;
    $(window).scroll(function () {
        if (typeof t === "number") {
            return false;
        }
        t = setTimeout(function () {
            t = null;
            var scrollTop = $("html,body").scrollTop();
            let min_height = parseInt(Math.min.apply(false, height_array));
            var scrollTop = $("html,body").scrollTop();
            if (!loading && (scrollTop + innerHeight + 200 > min_height)) {
                loading = true;
                console.log("加载图片");
                load()
                    .done(function (data) {
                        start = data.data.next_start;
                        loading = !loading;
                        render(data.data.object_list);
                        sort();
                        $(".lazy").lazyload();
                    });
            }
        }, 100)
    })


</script>

</html>